<template>
  <div class="startBo">
    <div class="startBo-header">
      <span @click="$router.go(-1)">
        <van-icon name="arrow-left" />
      </span>
      <div>创建直播</div>
      <span></span>
    </div>
    <div class="startBo-main">
      <van-uploader
        v-model="state.fileList"
        :deletable="false"
        :after-read="afterRead"
        upload-text="正面照"
        :max-count="1"
        preview-size="100%"
        class="main-1"
      >
        <div v-show="state.show">
          <span>+</span>
          <p>添加直播封面</p>
        </div>
      </van-uploader>
      <div class="main-2">
        <input type="text" placeholder="请输入直播主题" v-model="state.name" />
      </div>
    </div>
    <div class="startBo-footer">
      <van-button @click="openBo">开启直播</van-button>
    </div>
  </div>
</template>
<script>
import fs, { stat } from "fs";
import axios from "../../axios/index.js";
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const state = reactive({
      name: "",
      fileList: [],
      show: true,
      times: "",
      imgs: ""
    });
    //时间
    const startBo = () => {
      var date = new Date();
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D = date.getDate() + " ";
      const h = date.getHours() + ":";
      const m = date.getMinutes() + ":";
      const s = date.getSeconds();
      state.times = Y + M + D + h + m + s;
    };
    startBo();
    const afterRead = file => {
      state.show = false;
      // 此时可以自行将文件上传至服务器
      const frontPic = file.content.replace(/^data:image\/\w+;base64,/, "");
      function base64ToBlob(code) {
        //Base64一行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉，有时候因为存在需要把加号空格之类的换回来，取决于base64存取时的规则。
        code = code.replace(/[\n\r]/g, "");
        var raw = window.atob(code);
        let rawLength = raw.length;
        //转换成pdf.js能直接解析的Uint8Array类型
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], { type: "application/pdf" }); //转成pdf类型
      }
      //获取到了blob对象
      let blob = base64ToBlob(frontPic);
      //获取当前url，直接放到iframe就能用，下载同理
      let blobURL = window.URL.createObjectURL(blob);
      state.imgs=blobURL
      // window.localStorage.setItem("imgs", JSON.stringify(blobURL));
    };
    const openBo = () => {
      state.show = true;
      router.push({
        path: "/watch",
        query: {
          img: "https://api88.net/api/img/rand/",
          name: state.name,
          time: state.times
        }
      });
    };
    return {
      state,
      openBo,
      afterRead
    };
  }
});
</script>
<style lang="scss" scoped>
.startBo-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  height: 50px;
  font-size: 18px;
  background: #1887f6;
  align-items: center;
  color: white;
  span {
    width: 20%;
    margin-left: 10px;
  }
  img {
    margin-right: 10px;
  }
}
.startBo-main {
  .main-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96%;
    height: 200px;
    margin-left: 5px;
    border: 1px solid #ccc;
    margin-top: 15px;
    text-align: center;
    background: white;
    color: #000;
    span {
      font-size: 50px;
      color: #cfcfcf;
    }
    p {
      font-size: 16px;
    }
  }
  .main-2 {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    input {
      width: 95%;
      height: 35px;
    }
  }
}
.startBo-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  button {
    width: 100%;
    background: #169bd5;
    color: white;
    font-size: 16px;
  }
}
</style>

